<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <div class="container">
          <div id="controlHomeMap" style="width: 100%;height:100%;"></div>
          <div class="search-box">
            <Input search enter-button placeholder="输入用户名称" @on-search="search"/>
          </div>
          <div style="position: absolute;top:30px;right:30px;width: 50%">
            <Description></Description>
          </div>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import Description from "./description";
import { selectUserOperationWebmapCustSite } from "@/api/scada"


export default {
    name: "coldHot",
    components: {
        Description
    },
    props: {},
    data() {
        return {};
    },
    computed: {},
    created() {
    },
    mounted() {
        this.initMap();
    },
    watch: {},
    methods: {
        initMap() {
            let me = this;
            var map = new BMap.Map("controlHomeMap", {
                enableMapClick: false
            });
            me._map = map;
            map.enableScrollWheelZoom(true);

            var top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: {height: 100, width: 20},
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_ZOOM,
                // 启用显示定位
                // enableGeolocation: true // 会多出一个点
            });

            map.addControl(top_right_navigation);

            //
            var point = new BMap.Point(113, 28.21);
            console.log(point)
            map.centerAndZoom(point, 15);
            //
            this.getMarkData();

        },
        getMarkData(data={}) {
            let map = this._map;
            let me = this;
            map.clearOverlays();
            selectUserOperationWebmapCustSite(data).then(res=>{
                const {code,result} = res;
                if(code===200) {
                    me._siteArr = result||[];
                    let pointArr = []
                    for (let i = 0; i < me._siteArr.length; i++) {
                        let point = new BMap.Point(me._siteArr[i].posX, me._siteArr[i].posY);
                        pointArr.push(point)
                        addMarker(point,me._siteArr[i]);
                    }
                    if(pointArr.length>0) {
						map.setViewport(pointArr);
					}
                }
            })

            // 编写自定义函数,创建标注
            function addMarker(point,obj={}) {
                var marker = new BMap.Marker(point);
                var label = new BMap.Label(obj.siteName, {offset: new BMap.Size(20, -10)});
                marker.setLabel(label)
                marker.setAnimation(BMAP_ANIMATION_DROP)
                marker.addEventListener("click", ()=>attribute(obj));
                map.addOverlay(marker);
            }

            function attribute(obj) {
                sessionStorage.setItem('controlBasicInfo', JSON.stringify(obj));
                me.$router.push({name: 'userControl'})
            }

        },
        search(value) {
            this.getMarkData({keyword:value})
        }
    }
};
</script>

<style scoped lang="scss">
  .bg-style {
    background: url(~@/assets/img/welcome.png) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
  }

  .container {
    padding: 15px;
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
  }

  .search-box {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 300px;
    z-index: 1000;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.13);
  }

  .container-title {
    padding-left: 10px;
    font-size: 16px;
    color: #333;
    position: relative;
  }

  .container-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #0893fd;
    line-height: 16px;
  }

  .container-content {
    padding: 20px;
  }
</style>
